<template>
  <fieldset class="tallson1">
    <img src="../assets/img/2.jpg" alt=""/>
    <input type="text" v-model="txt1">
    <button @click="btn1()">提交</button>
  </fieldset>
</template>

<script setup>
import { ref } from "vue";

let txt1 = ref('');
const emits = defineEmits({
    // 对sendtxt事件中所有函数参数做非空验证
    sendtxt : (val)=>{
        if (val != '' ) {
            return true;
        }else{
            console.log('不可向父组件传递一个空数据');
            return false;
        }
    }
})

const btn1=()=>{
    emits('sendtxt',txt1.value);
    txt1.value = '';
}

</script>

<style scoped>
.tallson1{
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 0;
}
.tallson1 img{
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
}
.tallson1 input{
    height: 45px;
    width: 50%;
    border: 1px solid #9a9a9a;
    border-radius: 5px;
}
.tallson1 button{
    border: 0;
    width: 5rem;
    border-radius: 5px;
    line-height: 30px;
    background-color: cadetblue;
    color: white;
    height: 45px;

}
</style>